@import 'theme';
@import 'functions';
@import 'mixins';
@import '~bootstrap/scss/forms';

//currency selector color variables
$cx-language-selector-arrow-color: 'inverse' !default;
$cx-language-selector-arrow-color-mobile: 'text' !default;

//$currency-selector-variables
$language-selector-input-border-style: none;
$language-selector-input-border-width: 0;

:host {
  display: inline-block;
}

.cx-language-selector {
  position: relative;

  @include media-breakpoint-down(md) {
    color: theme-color('text');
  }

  &__label {
    @include sr-only();
  }
  &__control {
    color: inherit;
    background-color: transparent;
    border: $language-selector-input-border-width
      $language-selector-input-border-style;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px;
    height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 2px;
    margin-bottom: 10px;
  }
  &__arrow-down {
    @include var-color('border-color', $cx-language-selector-arrow-color);
    border-style: solid;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    position: absolute;
    right: 0.25rem;
    margin-top: 0.9rem;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);

    @include media-breakpoint-down(md) {
      @include var-color(
        'border-color',
        $cx-language-selector-arrow-color-mobile
      );
    }
  }
}
